<template>
	<view class="container">
		<view class="choose-way common">
			<text>选择支付方式</text>
			<view class="ipt">
				<view v-if="zhifubaole" @click="handleSelect(5)">
					<view class="circle" v-show="payType != 5"></view>
					<image class="orange" v-if="payType == 5" src="/static/icon1/51.png" mode="aspectFill"></image>
					<image class="pay-way" src="/static/icon1/26.png" mode="aspectFill"></image>
					<text>支付宝支付</text>
				</view>
				<view v-if="weixinle" @click="handleSelect(4)">
					<view class="circle" v-show="payType != 4"></view>
					<image class="orange" v-if="payType == 4" src="/static/icon1/51.png" mode="aspectFill"></image>
					<image class="pay-way" src="/static/icon1/53.png" mode="aspectFill"></image>
					<text>微信支付</text>
				</view>
				<view v-if="zhifubao" @click="handleSelect(0)">
					<view class="circle" v-show="payType != 0"></view>
					<image class="orange" v-if="payType == 0" src="/static/icon1/51.png" mode="aspectFill"></image>
					<image class="pay-way" src="/static/icon1/26.png" mode="aspectFill"></image>
					<text>支付宝支付</text>
				</view>
				<view v-if="weixin" @click="handleSelect(1)">
					<view class="circle" v-show="payType != 1"></view>
					<image class="orange" v-if="payType == 1" src="/static/icon1/51.png" mode="aspectFill"></image>
					<image class="pay-way" src="/static/icon1/53.png" mode="aspectFill"></image>
					<text>微信支付</text>
				</view>
			</view>
		</view>
		<view class="choose-amount common">
			<text>充值金额</text>
			<view class="main">
				<text :class="fixedMoney == 200 ? 'choose' : ''" @click="handleChoose(200)">200元</text>
				<text :class="fixedMoney == 500 ? 'choose' : ''" @click="handleChoose(500)">500元</text>
				<text :class="fixedMoney == 1000 ? 'choose' : ''" @click="handleChoose(1000)">1000元</text>
				<text :class="fixedMoney == 2000 ? 'choose' : ''" @click="handleChoose(2000)">2000元</text>
			</view>
			<view class="another">
				<text>其他金额</text>
				<view>
					<input @input="handleOtherMoney" type="number" v-model="otherMoney" placeholder="请填写不少于100元的金额"
						placeholder-class="plaho" />
				</view>
			</view>
		</view>
		<view class="confirm" @click="handlePrepaid">确认充值</view>
		<view v-if="ssurl">
			<web-view v-if="ssurl" :src="ssurl"></web-view>
		</view>
		<u-modal @cancel="handleZf" @confirm="handleZf" cancelText="重新支付" confirmText="已支付" confirmColor="#F39B19"
			:show="isShowZfConf" showCancelButton>
			<view class="slot-content">
				<text style="font-size: 34rpx;padding-bottom: 0;">是否已支付？</text>
			</view>
		</u-modal>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				payType: '', //0支付宝，1微信
				fixedMoney: '', //固定金额
				otherMoney: '', //其他金额
				money: '', //最终金额
				ssurl: '',
				tempTrade: '',
				isShowZfConf: false,
				requestObj: {},
				zhifubao: false,
				zhifubaole: false,
				weixin: false,
				weixinle: false,
				contnet: {},
			}
		},
		onShow() {
			this.getPayType()
			setTimeout(() => {
				uni.setStorageSync('wxTempTrade', plus.runtime.arguments)
				console.log('plus.runtime.arguments', plus.runtime.arguments)
			}, 10)
		},
		methods: {
			async getPayType() {
				let res = await this.$fetch(this.$api.property_list_by_type_and_key, {
					type: 1,
					key: 'pay_channel_open_list'
				}, 'POST')
				if (res.code != 0) {
					return
				}
				let data = res.data
				if (!data) {
					return
				}
				let dataArr = data.split(',')
				for (var i = 0; i < dataArr.length; i++) {
					if (dataArr[i] == 0) {
						this.zhifubao = true
						this.payType = 0
					} else if (dataArr[i] == 5) {
						this.zhifubaole = true
						this.payType = 5
					} else if (dataArr[i] == 1) {
						this.weixin = true
					} else if (dataArr[i] == 4) {
						this.weixinle = true
					}
				}
				console.log(dataArr)
			},
			async handleZf() {
				let res = await this.$fetch(this.$api.findUserPayOrder, {}, 'POST')
				if (res.code) {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					setTimeout(() => {
						this.isShowZfConf = false
					}, 500)
					return
				}
				if (!res.code) {
					uni.showToast({
						title: '已成功支付',
						icon: 'none'
					})
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/my/my'
						})
					}, 600)
				} else {
					uni.showToast({
						title: '未支付，请及时支付',
						icon: 'none'
					})
				}
				this.isShowZfConf = false
				uni.removeStorageSync('tempTrade')
				uni.removeStorageSync('wxTempTrade')
				uni.removeStorageSync('iswxzf')
			},
			// 确认充值
			async handlePrepaid() {
				// payType 0支付宝，1微信，2余额
				this.money = this.fixedMoney ? this.fixedMoney : this.otherMoney
				if (this.money % 1 != 0) return uni.showToast({
					title: '请输入整数金额~',
					icon: 'none'
				})
				if ((this.money - 100) < 0) return uni.showToast({
					title: '请输入大于100的金额~',
					icon: 'none'
				})
				if (!this.money) return uni.showToast({
					title: '请填入充值金额~',
					icon: 'none'
				})
				this.requestObj = {
					payType: this.payType,
					amount: this.money
				}
				if (this.payType == 5) {
					this.tempTrade = ''
					let res = await this.$fetch(this.$api.v1_recharge, this.requestObj, 'POST')
					if (res.code) return uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					let tempData = JSON.parse(res.data)
					this.tempTrade = tempData.trade
					uni.setStorageSync('tempTrade', this.tempTrade)
					let system = uni.getSystemInfoSync().platform
					if (system == 'android') {
						this.ssurl = tempData.url
						plus.runtime.openURL('alipays://platformapi/startapp?appId=20000067&url=' + this.ssurl, e => {
							uni.showToast({
								title: `打开支付宝失败！请检查是否已安装`,
								icon: 'none'
							})
						})
						setTimeout(() => {
							this.ssurl = ''
							this.isShowZfConf = true
						}, 5000)
					}
					if (system == 'ios') {
						plus.runtime.launchApplication({
							action: tempData.url
						})
						setTimeout(() => {
							this.ssurl = ''
							this.isShowZfConf = true
						}, 1000)
					}
					return
				} else if (this.payType == 4) {
					var thate = this
					setTimeout(() => {
						thate.ssurl = ''
						thate.isShowZfConf = true
					}, 3000)
					plus.share.getServices(res => {
						let sweixin = null;
						for (let i in res) {
							if (res[i].id == 'weixin') {
								sweixin = res[i];
							}
						}
						//唤醒微信小程序
						if (sweixin) {
							sweixin.launchMiniProgram({
									id: uni.getStorageSync('UUID'),
									type: 0, //小程序版本  0-正式版； 1-测试版； 2-体验版。
									path: 'pages/app-pay/app-pay-juhe/app-pay-juhe?api=' + this.$api
										.v1_recharge + '&requestObj=' + JSON.stringify(this.requestObj) +
										'&token=' + uni.getStorageSync('token') + '&options=' + '' +
										'&contnet=' + JSON.stringify(this
										.contnet) //小程序的页面,用传的参数在小程序接值判断跳转指定页面
								},
								//目标小程序点击返回App后执行的回调,在此接收binderror="launchAppError"的参数
								res => {
									console.log(res)
								}, err => {
									console.log(err)
								});
						}
					});
				} else if (this.payType == 0) {
					let res = await this.$fetch(this.$api.v1_recharge, this.requestObj, 'POST')
					if (res.code) return uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					uni.requestPayment({
						provider: 'alipay',
						orderInfo: res.data, //微信、支付宝订单数据
						success: function(res) {
							uni.showToast({
								title: '充值成功~',
								icon: 'none'
							})
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/my/my'
								})
							}, 600)
						},
						fail: function(err) {
							console.log('fail:' + JSON.stringify(err));
						}
					})
				} else if (this.payType == 1) {
					let res = await this.$fetch(this.$api.v1_recharge, this.requestObj, 'POST')
					if (res.code) return uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					uni.requestPayment({
						provider: 'wxpay',
						orderInfo: res.data, //微信、支付宝订单数据
						success: function(res) {
							console.log('success:' + JSON.stringify(res));
							uni.showToast({
								title: '充值成功~',
								icon: 'none'
							})
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 600)
						},
						fail: function(err) {
							console.log('fail:' + JSON.stringify(err));
						}
					})
				}
			},
			//选择提现类型
			handleSelect(index) {
				this.payType = index
			},
			//选择充值金额
			handleChoose(index) {
				this.fixedMoney = index
				this.otherMoney = ''
			},
			// 选择充值其他金额
			handleOtherMoney() {
				this.fixedMoney = ''
			},
		},
	}
</script>
<style lang="less">
	.container {
		overflow: hidden;

		&>.common {
			margin-top: 30rpx;
			background-color: #FFFFFF;
			padding: 30rpx 30rpx 0;

			&>text {
				margin-bottom: 20rpx;
				height: 40rpx;
				position: relative;
				text-align: center;
				font-weight: bold;
				display: flex;
				align-items: center;

				&::before {
					content: "";
					position: absolute;
					left: -30rpx;
					width: 4rpx;
					height: 28rpx;
					background: #FCC928;
					border-radius: 1px;
				}
			}
		}

		&>.choose-way {

			// border: 1px solid #000000;
			&>.ipt {
				&>view {
					display: flex;
					align-items: center;
					padding: 30rpx 0;

					// 横线
					&::after {
						content: "";
						position: absolute;
						top: 220rpx;
						left: 96rpx;
						width: 654rpx;
						height: 2rpx;
						background: #F2F2F2;
						border-radius: 1px;
					}

					.circle {
						width: 33rpx;
						height: 33rpx;
						margin-right: 30rpx;
						border-radius: 50%;
						border: 1px solid rgba(64, 33, 16, 0.30);
					}

					.orange {
						width: 36rpx;
						height: 36rpx;
						margin-right: 30rpx;
					}

					.pay-way {
						// border: 1px solid #007AFF;
						width: 42rpx;
						height: 42rpx;
						margin-right: 20rpx;
					}
				}
			}
		}

		&>.choose-amount {
			background-color: #FFFFFF;
			padding: 30rpx;
			margin-top: 30rpx;

			&>.main {
				display: flex;

				&>text {
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 30rpx;
					width: 146rpx;
					height: 176rpx;
					font-size: 17px;
					color: rgba(64, 33, 16, 0.70);
					letter-spacing: -0.41px;
					border: 1px solid rgba(64, 33, 16, 0.30);
					border-radius: 5px;

					&.choose {
						color: #F39B19;
						font-weight: bold;
						background: rgba(243, 155, 25, 0.10);
						border-color: #F39B19;
					}
				}

				&>text:last-child {
					margin-right: 0rpx;
				}
			}

			&>.another {
				&>text {
					margin: 30rpx 0 20rpx;
					height: 40rpx;
					position: relative;
					text-align: center;
					font-weight: bold;
					display: flex;
					align-items: center;
				}

				&>view {
					background: #F2F2F2;
					border-radius: 4px;
					height: 90rpx;
					display: flex;
					align-items: center;

					&>input {
						flex: 1;
						padding: 0 30rpx;
						height: 40rpx;
						font-size: 14px;

						.plaho {
							font-size: 14px;
							color: rgba(64, 33, 16, 0.50);
						}
					}
				}
			}
		}

		&>.confirm {
			position: fixed;
			bottom: 0;
			background: #FCC928;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100vw;
			height: 100rpx;

			&:active {
				opacity: .8;
			}
		}
	}
</style>